<template>
  <div class="specBox spec_set">
    <div class="title">标注工具配置</div>
    <div class="labelTitle">
      <span style="padding-top: 10px;">图片数量</span>
      <input
        :disabled="edit == true"
        style="outline:none;border:1px solid #ccc;display: inline-block;height: 24px;line-height: 24px;width: 180px;padding: 0;text-align: left;text-indent: 10px;"
        type="number"
        class="textLength"
        @change="checkNumRole($event)"
        v-model="pictureNum"
        max="400"
        min="10"
      />
    </div>
    <!-- 子句标签 -->
    <div class="labelTitle">
      <span>属性</span>
      <div class="labelAttr">
        <span
          style="cursor: pointer"
          @click="childLabel.radio = true"
          :style="{color:(childLabel.radio ? '#14cb6b' : '#666')}"
        >单选</span>
        <span>|</span>
        <span
          style="cursor: pointer"
          @click="childLabel.radio = false"
          :style="{color:(!childLabel.radio ? '#14cb6b': '#666')}"
        >多选</span>
      </div>
    </div>
    <div class="taglist textTagList">
      <span v-for="(label,index) in childLabel.label" :key="label.cname" :data-index="index">
        {{label.cname}}
        <i v-if="label.edit" @click="deleteTag('childLabel',index)"></i>
      </span>
      <a
        style="display:inline-block;margin-right:10px;margin-bottom: 6px;"
        @click="addTag('childLabel')"
        v-if="childLabel.label.length < 15"
      >添加属性</a>
    </div>
    <!--设置标签的中英文名-->
    <div class="stepitem taglist" v-if="tagBox" :style="modalStyle">
      <transition name="fade">
        <div class="addtagbox" v-if="tagBox">
          <div class="tagName">
            添加属性
            <i @click="cancel"></i>
          </div>
          <div class="tagitem">
            <label>属性名称</label>
            <input
              type="text"
              name="cname"
              placeholder="请输入属性名称"
              v-on:focus="monitor($event)"
              v-model="tagInfo.cname"
            />
          </div>
          <div class="tagitem">
            <label>英文名称</label>
            <input
              type="text"
              name="ename"
              placeholder="请输入英文名称"
              v-on:focus="monitor($event)"
              v-model="tagInfo.ename"
            />
          </div>
          <div class="addtag">
            <span class="yes" @click="save()">确定</span>
            <span class="no" @click="cancel">取消</span>
          </div>
        </div>
      </transition>
    </div>

    <div class="title">积分设置</div>
    <div class="inputline">
      <div class="line_type" id="markinput">
        <label>标注积分系数</label>
        <input
          type="tel"
          v-on:input="changecoe('mark')"
          v-model="score.mark.coe"
          name
          placeholder="积分系数"
        />
      </div>
      <div class="line_type">
        <label>标注积分公式</label>
        <input
          style="width: 170px;"
          type="text"
          :title="score.mark.formula"
          :value="score.mark.formula"
          readonly
          placeholder="积分方式"
        />
      </div>
      <div class="line_type">
        <div class="checktype">
          <span
            @click="scoreMarkDuring"
            style="opacity:0.6"
            :class="{'checked':score.mark.during}"
          >总张数</span>
          <span
            @click="scoreMarkcorrect"
            style="opacity:0.6"
            :class="{'checked':score.mark.correct}"
          >正确率</span>
        </div>
      </div>
    </div>
    <div class="inputline" v-show="checkStatus">
      <div class="line_type" id="checkinput">
        <label>检查积分系数</label>
        <input
          type="tel"
          v-on:input="changecoe('check')"
          v-model="score.check.coe"
          placeholder="积分系数"
        />
      </div>
      <div class="line_type">
        <label>检查积分公式</label>
        <input
          style="width: 170px;"
          type="text"
          :title="score.check.formula"
          :value="score.check.formula"
          readonly
          placeholder="积分方式"
        />
      </div>
      <div class="line_type">
        <div class="checktype">
          <span style="opacity:0.6" :class="{'checked':score.check.during}">总张数</span>
        </div>
        <div class="checktype">
          <span
            style="opacity:0.6"
            @click="scoreCheckDuring"
            :class="{'checked':score.check.correct}"
          >正确率</span>
        </div>
      </div>
    </div>
    <div class="reason" v-show="textareaStatus!=0">
      <label>超限原因</label>
      <textarea v-model="textareaValue" maxlength="40" placeholder="请输入超限原因"></textarea>
    </div>
    <div class="conten_item">
      <div class="labelTitle">
        <span>积分换算</span>
        <div
          class="switch"
          :class="{'active': exchangeStatus}"
          @click="exchangeStatus = !exchangeStatus"
        >
          <div class="block"></div>
        </div>
      </div>
      <div class="clear:both"></div>
      <div class="checkhide" v-show="exchangeStatus">
        <div class="hideline">
          <label>积分换算比例</label>
          <div class="typeli">
            <input type="number" v-model="exchangeVal"/>
            <i style="width:250px;">({{exchangeVal}}条坏数据积分等于1条好数据积分)</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SpecSetting",
  data() {
    return {
      edit: false,
      taskId:'',
      checkStatus: false, //是否检查
      checkType: 1, //检查数据类型
      checkVal: 100, //检查比例
      testStatus: false, //是否质检
      testType: 1, //质检数据类型
      testVal: 100, //质检比例
      exchangeStatus: true, //是否积分换算
      exchangeVal: 1, //积分换算比例
      textareaStatus: 0, //0:未超限，1:超限 显示原因
      textareaValue: "",
      score: {
        mark: {
          //标注积分
          coe: "", //积分系数
          formula: "", //积分方式
          during: true, //总张数
          correct: true, //正确率
          max: "",
          min: "",
          correctWeight: {
            childWeight: 1
          }
        },
        check: {
          coe: "", // 积分系数
          formula: "", // 积分方式
          during: true, // 总张数
          correct: true, // 正确率
          min: "",
          max: ""
        }
      },
      childLabel: {
        label: [],
        radio: false //多选
      },
      tagListArr: [], //标签设置
      textLabel: [],
      tagBox: false, //添加标签的弹框
      isLabelAttr: false, //添加属性的弹框
      tagInfo: {
        //标签添加框
        cname: "",
        ename: ""
      },
      modalStyle: {
        width: $(document).outerWidth() + 25 + "px",
        height: $(document).outerHeight() + "px",
        background: "rgba(0,0,0,0.3)",
        position: "fixed",
        top: 0,
        left: 0,
        zIndex: 9999
      },
      totalWeight: 1,
      pictureNum: 400
    };
  },
  props:['editSpecData'],
  created(){
    if(this.editSpecData){
      this.checkStatus=this.editSpecData.checkStatus;
      this.checkType=this.editSpecData.checkType;
      this.checkVal=this.editSpecData.checkVal;
      this.testStatus=this.editSpecData.testStatus;
      this.testType=this.editSpecData.testType;
      this.testVal=this.editSpecData.testVal;
      this.exchangeStatus=this.editSpecData.exchangeStatus;
      this.exchangeVal=this.editSpecData.exchangeVal;
      this.textareaStatus=this.editSpecData.textareaStatus;
      this.textareaValue=this.editSpecData.textareaValue;
      this.tagListArr=this.editSpecData.tagListArr;
      this.textLabel=this.editSpecData.textLabel;
      this.tagBox=this.editSpecData.tagBox;
      this.isLabelAttr=this.editSpecData.isLabelAttr;
      
      this.totalWeight=this.editSpecData.totalWeight;
      this.pictureNum=this.editSpecData.pictureNum;
      this.$set(this.score,"mark",this.editSpecData.score.mark);
      this.$set(this.score,"check",this.editSpecData.score.check);
      this.childLabel.label=this.editSpecData.childLabel.label;
      this.childLabel.radio=this.editSpecData.childLabel.radio;
    }
  },
  watch: {
    textLength: function() {
      if (this.textLength > 500) {
        this.textLength = 500;
      } else if (this.textLength < 0) {
        this.textLength = 1;
      }
    }
  },
  methods: {
    checkNumRole: function() {
      let self = this;
      try {
        if (isNaN(Number(self.pictureNum))) {
          this.$message("图片上限格式有误，初始化为400");
          self.pictureNum = 400;
        } else {
          if (Number(self.pictureNum) >= 400) {
            self.pictureNum = 400;
          } else if (Number(self.pictureNum) <= 10) {
            self.pictureNum = 10;
          }
        }
      } catch (e) {
        self.pictureNum = 400;
      }
    },
    changeTS: function(flag) {
      this.testStatus = flag;
    },
    changeEC: function(flag) {
      this.exchangeStatus = flag;
      if (!flag) {
        this.exchangeVal = 1;
      }
    },
    changeCType: function(n) {
      this.checkType = n;
    },
    getCheckUpType: function() {
      //修改检错规则
    },
    changeTType: function(n) {
      this.testType = n;
    },
    // type 添加标签类型
    addTag: function(type) {
      this.curType = type;
      this.tagBox = true;
    },
    cancel: function() {
      this.tagBox = false;
      this.isLabelAttr = false;
      this.importBox = false;
      this.tagInfo.cname = "";
      this.tagInfo.ename = "";
      // $('body').css('overflow','auto');
    },
    // type 1 标签层  2标签 3文本标签
    deleteTag: function(type, n) {
      this[type].label.splice(n, 1);
    },
    monitor: function(e) {
        e = e.currentTarget;
      if ($(e).hasClass("err")) {
        $(e)
          .removeClass("err")
          .addClass("yes");
      }
      $(e)
        .next(".error")
        .remove();
    },
    save: function() {
      let self = this;
      //var reg = /^[A-Za-z0-9\-\<\>\-\u4e00-\u9fa5]+$/;
      let reg = /.*/;

      /*新增*/
      if (self.tagInfo.cname == "" || self.tagInfo.cname.trim() === "") {
        if (!$("input[name=cname]").hasClass("err")) {
          $("input[name=cname]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>中文名称不能为空</div>");
        }
        return;
      } else if (
        self.tagInfo.cname.length > 20 ||
        self.tagInfo.cname.length < 1
      ) {
        if (!$("input[name=cname]").hasClass("err")) {
          $("input[name=cname]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>中文名称不能超过20个字符</div>");
        }
        return;
      } else if (!reg.test(self.tagInfo.cname)) {
        if (!$("input[name=cname]").hasClass("err")) {
          $("input[name=cname]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>只支持中英文、数字和-</div>");
        }
        return;
      } else if (
        (self.tagInfo.ename == "" || self.tagInfo.ename.trim() === "") &&
        self.curKey != "text"
      ) {
        if (!$("input[name=ename]").hasClass("err")) {
          $("input[name=ename]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>英文名称不能为空</div>");
        }
        return;
      } else if (
        self.tagInfo.ename.length > 20 ||
        (self.tagInfo.ename.length < 1 && self.curKey != "text")
      ) {
        if (!$("input[name=ename]").hasClass("err")) {
          $("input[name=ename]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>英文名称不能超过20个字符</div>");
        }
        return;
      } else if (!reg.test(self.tagInfo.ename) && self.curKey != "text") {
        console.log("啥也不干？");
      } else {
        let flag = true, mytag = 0;

        let taglist = this[this.curType].label;
        for (let i = 0; i < taglist.length; i++) {
          console.log(taglist);
          if (taglist[i].cname == self.tagInfo.cname) {
            flag = false;
            mytag = 1;
            break;
          }
          if (taglist[i].ename == self.tagInfo.ename) {
            flag = false;
            mytag = 2;
            break;
          }
        }

        if (flag) {
          var newdata = new Object();
          newdata.cname = self.tagInfo.cname;
          newdata.ename = self.tagInfo.ename;
          newdata.edit = self.tagInfo.edit = true;
          this[this.curType].label.push(newdata);
          self.tagBox = false;
          self.tagInfo.cname = "";
          self.tagInfo.ename = "";
        } else {
          if (mytag == 1) {
            if (!$("input[name=cname]").hasClass("err")) {
              $("input[name=cname]")
                .removeClass("yes")
                .addClass("err")
                .after("<div class='error'>当前属性已存在</div>");
            }
            return;
          } else {
            if (!$("input[name=ename]").hasClass("err")) {
              $("input[name=ename]")
                .removeClass("yes")
                .addClass("err")
                .after("<div class='error'>当前属性已存在</div>");
            }
            return;
          }
        }
      }
    },

    checkReg: function() {
      this.checkedReg = !this.checkedReg;
    },

    //监听积分设置input
    changecoe: function(type) {
      var self = this;
      if (this.score.mark.coe == "" && this.score.check.coe == "") {
        this.textareaStatus = 0;
        this.textareaValue = "";
        if ($("#markinput").find("span").length != 0) {
          $("#markinput span").remove();
        }
        if ($("#checkinput").find("span").length != 0) {
          $("#checkinput span").remove();
        }
      } else {
        // let proxyurl = "/v1/task/info/id?taskid=" + self.taskId;
        if (type == "mark") {
            self.ass_api.listenIntegral({
                taskid :  self.taskId 
            }).then(data => {
              if(!data) return;
                let datas = eval("(" + data.score + ")");
                let markmin = Number(datas.mark.min);
                let markmax = Number(datas.mark.max);
                let markcoe = Number(self.score.mark.coe);
                let checkmin = Number(datas.check.min);
                let checkmax = Number(datas.check.max);
                let checkcoe = Number(self.score.check.coe);
                self.score.mark.min = markmin;
                self.score.mark.max = markmax;
                self.score.check.min = checkmin;
                self.score.check.max = checkmax;
                if (markmin == 0 && markmax == 0 && checkmin == 0 && checkmax == 0) {
                  self.score.mark.coe = 0;
                } else {
                  if (self.score.mark.coe != "") {
                    if (markcoe > markmax || markcoe < markmin) {
                      self.textareaStatus = 1;
                      if ($("#markinput").find("span").length == 0) {
                        $("#markinput").append("<span>积分超限</span>");
                      }
                    } else {
                      if ($("#markinput").find("span").length != 0) {
                        $("#markinput span").remove();
                      }
                      if (self.checkStatus && checkcoe != "") {
                        if (checkcoe > checkmax || checkcoe < checkmin) {
                          self.textareaStatus = 1;
                          if ($("#checkinput").find("span").length == 0) {
                            $("#checkinput").append("<span>积分超限</span>");
                          }
                        } else {
                          self.textareaStatus = 0;
                          self.textareaValue = "";
                        }
                      } else {
                        self.textareaStatus = 0;
                        self.textareaValue = "";
                      }
                    }
                  } else {
                    if ($("#markinput").find("span").length != 0) {
                      $("#markinput span").remove();
                    }
                  }
                }
            })
        } else {
            self.ass_api.listenIntegral({
                taskid :  self.taskId 
            }).then(data => {
              if(!data) return;
              let datas = eval("(" + data.score + ")");
              let markmin = Number(datas.mark.min);
              let markmax = Number(datas.mark.max);
              let markcoe = Number(self.score.mark.coe);
              let checkmin = Number(datas.check.min);
              let checkmax = Number(datas.check.max);
              let checkcoe = Number(self.score.check.coe);
              if (
                markmin == 0 &&
                markmax == 0 &&
                checkmin == 0 &&
                checkmax == 0
              ) {
                self.score.check.coe = 0;
              } else {
                if (self.score.check.coe != "" && self.checkStatus) {
                  if (checkcoe > checkmax || checkcoe < checkmin) {
                    self.textareaStatus = 1;
                    if ($("#checkinput").find("span").length == 0) {
                      $("#checkinput").append("<span>积分超限</span>");
                    }
                  } else {
                    if (markcoe != "") {
                      if (markcoe > markmax || markcoe < markmin) {
                        self.textareaStatus = 1;
                        if ($("#markinput").find("span").length == 0) {
                          $("#markinput").append("<span>积分超限</span>");
                        }
                      } else {
                        self.textareaStatus = 0;
                        self.textareaValue = "";
                      }
                    } else {
                      self.textareaStatus = 0;
                      self.textareaValue = "";
                    }
                    if ($("#checkinput").find("span").length != 0) {
                      $("#checkinput span").remove();
                    }
                  }
                } else {
                  if (markcoe != "") {
                    if (markcoe > markmax || markcoe < markmin) {
                      self.textareaStatus = 1;
                      if ($("#markinput").find("span").length == 0) {
                        $("#markinput").append("<span>积分超限</span>");
                      }
                    } else {
                      self.textareaStatus = 0;
                      self.textareaValue = "";
                    }
                  } else {
                    self.textareaStatus = 0;
                    self.textareaValue = "";
                  }
                  if ($("#checkinput").find("span").length != 0) {
                    $("#checkinput span").remove();
                  }
                }
              }
            })
        }
      }
      this.formula(type);
    },
    //获得标注积分计算方式
    formula: function(type) {
      if (type == "mark") {
        let s = "",
          x = "",
          y = "";
        if (this.score.mark.coe != "") {
          s = this.score.mark.coe;
        }
        if (this.score.mark.during) {
          x = "*总张数";
        }
        if (this.score.mark.correct) {
          y = "*正确率";
        }
        this.score.mark.formula = s + x + y;
      } else {
        let s = "",
          x = "",
          y = "";
        if (this.score.check.coe != "") {
          s = this.score.check.coe;
        }
        if (this.score.check.during) {
          x = "*总张数";
        }
        if (this.score.check.correct) {
          y = "*正确率";
        }
        this.score.check.formula = s + x + y;
      }
    },
    scoreMarkDuring: function() {},
    scoreMarkcorrect: function() {},
    scoreCheckDuring: function() {},
    scoreCheckcorrect: function() {},
    //计算权重总和
    sumTotalWeight: function() {
      var weight = 0;
      weight +=
        this.score.mark.correctWeight.childWeight &&
        this.score.mark.correctWeight.childWeight > -1
          ? parseFloat(this.score.mark.correctWeight.childWeight)
          : 0;

      weight = Math.round(weight * 10000);
      this.totalWeight = weight / 10000;
      // debugger
      console.log(this.totalWeight);
    },
    GetQueryString: function(name) {
      //流转任务时获取batchid
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
  },
  mounted: function() {
    this.changecoe("mark");
    this.changecoe("check");
    $(".modal").css({
      width: $(window).width() + "px",
      height: $(window).height() + "px"
    });
    if(this.GetQueryString("taskId")){
      this.taskId = this.GetQueryString("taskId");
    }
    if(this.GetQueryString("edit")){
      this.edit = this.GetQueryString("edit");
    }
    if (this.childLabel.label.length > 0 && this.edit == "true") {
      //添加属性，已存在的标签不能删除
      for (let i = 0; i < this.childLabel.label.length; i++) {
        this.$set(this.childLabel.label[i], "edit", false);
      }
    } else if (this.edit == null || this.edit == undefined || this.edit == "") {
      for (let i = 0; i < this.childLabel.label.length; i++) {
        this.$set(this.childLabel.label[i], "edit", true);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.spec_set{
    .title {
        color: #5e6a68;
        font-size: 16px;
        font-weight: 700;
        line-height: 48px;
        display: block;
        position: relative;
        padding-left: 14px;
        margin-top: 10px;
    }
    .title:before {
        position: absolute;
        left: 0;
        top: 17px;
        width: 4px;
        height: 15px;
        display: block;
        background: #07d569;
        content: "";
    }
    .title p {
        padding: 5px 23px;
        display: inline;
        font-size: 12px;
        font-weight: normal;
        color: #e07900;
    }
}

</style>
